$color-blankstate: rgba($color-body-text, 0.35);
$color-blankstate-border: rgba($color-body-text, 0.2);
$color-blankstate-background: rgba($color-body-text, 0.1);

.placeholder-svg {
  display: block;
  fill: $color-blankstate;
  background-color: $color-blankstate-background;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid $color-blankstate-border;
}

.placeholder-svg--small {
  width: 480px;
}

.placeholder-noblocks {
  padding: 40px;
  text-align: center;
}

// Mimic a background image by wrapping the placeholder svg with this class
.placeholder-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  .icon {
    border: 0;
  }
}
